<template>
  <li class="todo-item" :key="index">
    <!-- <span :class="{ finished: item.isFinished }">{{ index + 1 }}</span>
        &nbsp;&nbsp; -->
    <span class="todo-item-content" :class="{ finished: item.isFinished }"
      >{{ index + 1 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
        item.name
      }}</span
    >
    <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
    <span class="todo-item-time" :class="{ finished: item.isFinished }">
      {{ nowTime }}</span
    >
    <span class="opera">
      <i
        v-if="!item.isTop"
        class="fa fa-arrow-up"
        @click.stop="$emit('top')"
      ></i>
      <i
        v-if="item.isTop"
        class="fa fa-arrow-down"
        @click.stop="$emit('down')"
      ></i>
      <i class="fa fa-check" @click.stop="$emit('finished')"></i>
      <i class="fa fa-trash" @click.stop="$emit('delete')"></i>
    </span>
  </li>
</template>

<script>
export default {
  name: 'todoli',
  data() {
    return {}
  },
  props: ['item', 'index', 'nowTime'],

  mounted() {},

  methods: {}
}
</script>

<style lang="scss" scoped>
.todo-item {
  // margin-bottom: 20px;
  display: flex;
  margin: 20px 20px;
  width: 96%;
  // padding: 0 10px;
  justify-content: space-between;
  align-items: center;
  // height: 80px;
  position: relative;
  background-color: #fff !important;
  font-size: 16px;
  border-radius: 4px;
  line-height: 36px;
  color: #111;
  .todo-item-content {
    margin-left: 40px;
    width: 365px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .todo-item-time {
    white-space: nowrap;
    margin-right: 40px;
  }
  .opera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      margin-right: 10px;
      font-size: 18px;
      &:last-child {
        color: red;
        margin: 0 20px 0;
      }
    }
  }
}
.finished {
  text-decoration: line-through #2f4f4f;
}
</style>
